import React from 'react';
import 'styles/data-center/report/graphic-report/report-overview.scss';

const { PropTypes } = React;

class ReportOverview extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItem = (item, index, list) => {
    const { title, detail } = item;
    const length = list.length;
    const width = (1 / length) * 100 + '%';
    return (
      <div className='overview-card-wrapper'
           style={{ width }}>
        <div className="card-title">
          {title}
        </div>
        <div className="card-detail">
          {detail}
        </div>
      </div>
    )
  };

  render() {
    const {
      data,
    } = this.props;
    return (
      <div className="report-overview">
        <div className="report-overview-wrapper">
          {data.map(this.renderItem)}
        </div>
      </div>
    );
  }

  static propsType = {
    data: PropTypes.array,
  }

  static defaultProps = {
    data: [],
  }

}


export default ReportOverview;



